<script setup>
  
</script>



<template>
  <div class="shop">
    <div >
        <div class="shop-care" >
            <div class="shop-care-side">
                <div>
                    <a href="">
                        <img src="https://img.alicdn.com/bao/uploaded//ed/02/TB1PAL9MpXXXXaHXXXXSutbFXXX.jpg_50x50.jpg" alt="shoptp">
                    </a>
                </div>
            </div>
            <div class="shop-care-main">
                <div class="shop-name">
                    <img src="https://img.alicdn.com/tps/i3/T1DgeGFdNbXXbXX2Hb-24-18.png" alt="">
                    <a href="">飞机店</a>
                </div>
                <div class="shop-name-link">
                    <a href="">飞机店旗舰店</a>
                </div>
            <div>
                <div  class="shop-note">
                    <i class="shop-note-icon"></i>
                    添加备注
                </div>
            </div>

                <div>
                    <div class="shop-app">
                        <i>+</i>
                        <span>添加标签分类</span>
                    </div>
                </div>
            </div>
            <div>
                <div class="more-shop">
                    <a class="more-shop-link" href="">相似店铺</a>
                </div>
                <div class="shop-tool">
                    <ul>
                        <li class="shop-tool-del shop-tool-icon" title="删除"></li>
                        <li class="shop-tool-top shop-tool-icon" title="置顶"></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="item-list-box">
            <div class="box">
                <div class="item-list-box-tab">
                    <div class="hotSell">热销<em>42</em></div>
                    <div class="findgood">发现好货</div>
                </div>
                <a class="item-list-morebth" href=""> 查看更多 </a>
            </div>
            <div class="item-list">
                <ul class="item-list-findgood-ul"></ul>
                <ul class="item-list-hotsell-ul">
                    <li class="item-box">
                        <div class="item">
                            <a href=""><img src="https://bpic.588ku.com/element_origin_min_pic/01/49/29/8557445ec722ebe.jpg" alt=""></a>
                        </div>   

                        <div class="item-price">
                            <div class="price">$ 88</div>
                        </div>
                    </li>
                    <li class="item-box">
                        <div class="item">
                            <a href=""><img src="https://bpic.588ku.com/element_origin_min_pic/01/49/29/8557445ec722ebe.jpg" alt=""></a>
                        </div>   

                        <div class="item-price">
                            <div class="price">$ 88</div>
                        </div>
                    </li>
                    <li class="item-box">
                        <div class="item">
                            <a href=""><img src="https://bpic.588ku.com/element_origin_min_pic/01/49/29/8557445ec722ebe.jpg" alt=""></a>
                        </div>   

                        <div class="item-price">
                            <div class="price">$ 88</div>
                        </div>
                    </li>
                </ul>

                <div class="item-list-tool">展开</div>
            </div>

        </div>

    </div>
  </div>
  
</template>



<style scoped lang="scss">

.shop-care{
width: 200px;
margin-right: 30px;
margin-bottom: 8px;
}

.item-list-box{
    float: right;
    width: 950px;
}

.shop-care-side {
    float: left;
    padding-left: 6px;
    padding-right: 17px;
    height: 190px;
    width: 50px;
}
.shop-care-main {
    float: left;
}
.shop-name{
    line-height: 25px;
    margin-bottom: 2px;
    height: 26px;
    width: 143px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.shop-name-link {
    font-size: 10px;
    color: #272424;
}
.shop-note{
    line-height: 20px;
}
.shop-note-icon{
    width: 17px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
    background-position: 0 -1px;
    background: url(https://img.alicdn.com/tps/i3/TB1uVruGpXXXXbzXFXXcnMESXXX-45-118.png);
}
.shop-app{
    margin-bottom: 9px;
    display: inline-block;
    max-width: 190px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.more-shop{
    position: absolute;
    top: 226px;
    left: 3px;
}
.more-shop-link{
    color: #fa1010;
    padding-right: 10px;
    background-position: 58px -135px;
    padding-left: 3px;
}
.shop-tool{
    position: absolute;
    top: 20px;
    right: 1000px;
    width: 50x;
    height: 27px;
}
.shop-tool-del{
    background-position-x: 3px;
    background-position-y: -69px;
}
.shop-tool-top{
    background-position-x: 4px;
    background-position-y: -98px;
}
.shop-tool-icon{
    text-align: center;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
    width: 25px;
    float: left;
    overflow: hidden;
    text-indent: -999px;
    background: url(https://img.alicdn.com/tps/i3/TB1uVruGpXXXXbzXFXXcnMESXXX-45-118.png);
}
.item-list-box-tab{
    float: left;
    border: #dcdcdc 1px solid;
}
.hotSell{
    background-color: #f3f3f3;
    color: #ff4200;
    float: left;
    padding: 0 13px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    color: #6c6c6c;
    cursor: pointer;
}
.findgood{
    border-left: #dcdcdc 1px solid;
    width: 85px;
    overflow: hidden;
    text-indent: -200px;
    background: url(https://img.alicdn.com/tps/TB1PJdIKXXXXXX5XpXXXXXXXXXX-87-59.png) 0 -32px no-repeat;
}
.item-list-morebth{
    float: right;
    color: #6c6c6c;
    padding-right: 40px;
}
.item-list-findgood-ul{
    margin-right: -40px;
    height: 205px;
    overflow: hidden;
    display: none;
}
.item-list-hotsell-ul{
    margin-bottom: 16px;
    zoom: 1;
    position: relative;
}
.item-box{
    float: left;
    text-align: center;
    height: 150px;
    position: relative;
    width: 150px;
    margin-right: 3px;
}
.item {
    width: 148px;
    height: 148px;
    border: #f7f6f6 1px solid;
    margin-bottom: 8px;
}
.item-price{
    height: 25px;
    line-height: 25px;
    overflow: hidden;
}
.price{
    float:left;

    font-family: arial;
}
.item-list-tool {
    float: right;
    margin-top: -14px;
    color: #a31a1a;
    line-height: 400px;
    height: 20px;
    width: 70px;
}
.item-list{
    width: 750px;
    height: 200px;

}
.box{
    width: 900px;
    height:20px;
}

</style>